import { ref, onMounted, onUnmounted } from "vue";
import * as echarts from "echarts";
import { svg } from "../optionConfig";
export const useChartOption = () => {
  // 设置图表配置项
  const chartOption = ref({});
  const setChartOption = () => {
    var colorList = ["#998CEF", "#D9D8EB"];
    chartOption.value = {
      backgroundColor: "rgba(30, 34, 48, 1)",
      legend: {
        top: 17,
        right: 30,
        icon: "roundRect",
        itemWidth: 10,
        itemHeight: 8,
        itemGap: 15,
        textStyle: {
          fontFamily: "MicrosoftYaHei",
          fontSize: 14,
          color: "rgba(255, 255, 255, 1)",
        },
        // data: ["计划量", "完成量"],
      },
      grid: {
        top: "10%",
        left: "5%",
        right: "5%",
        bottom: "10%",
        containLabel: true,
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "line",
          lineStyle: {
            color: "rgba(113, 113, 113, 1)",
          },
        },
        backgroundColor: "rgba(42, 51, 74, 1)",
        borderColor: "transparent",
        formatter: function (params) {
          let colors = ["rgba(124, 124, 191, 1)", "rgba(233, 195, 116, 1)"];
          let returnData = '<div style="padding: 5px 10px;">';
          returnData +=
            '<span style="font-family: MicrosoftYaHei; font-size: 14px; color: rgba(210, 221, 249, 1);">' +
            params[0].axisValue +
            "</span><br/>";
          for (let i = 0; i < params.length; i++) {
            returnData +=
              '<span style="display:inline-block; width:10px; height:8px; margin-right:5px; border-radius:1px; background-color:' +
              colors[i] +
              '"></span>';
            returnData +=
              '<span style="font-family: MicrosoftYaHei; font-size: 14px; color: ' +
              colors[i] +
              '">' +
              params[i].seriesName +
              '：</span><span style="font-family: Verdana; font-size: 14px; color: ' +
              colors[i] +
              '">' +
              params[i].value +
              '</span><span style="display:inline-block; margin-left: 4px; line-height: 10px; font-family: MicrosoftYaHei; font-size: 12px; color: ' +
              colors[i] +
              '">车</span><br/>';
          }
          returnData += "</div>";
          return returnData;
        },
      },
      xAxis: {
        type: "category",
        axisLine: {
          show: true,
          lineStyle: {
            color: "rgba(52, 51, 51, 1)",
          },
        },
        splitLine: {
          show: false,
        },
        axisLabel: {
          fontFamily: "MicrosoftYaHei",
          fontSize: 12,
          color: "rgba(113, 113, 113, 1)",
        },
        axisTick: {
          show: false,
          alignWithLabel: true,
        },
        boundaryGap: false,
        data: [
          "2021.12.18",
          "2021.12.19",
          "2021.12.20",
          "2021.12.21",
          "2021.12.22",
          "2021.12.23",
        ],
      },
      yAxis: {
        type: "value",
        name: "车",
        nameTextStyle: {
          fontFamily: "MicrosoftYaHei",
          fontSize: 12,
          color: "rgba(113, 113, 113, 1)",
        },
        min: 0,
        axisLine: {
          show: false,
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "rgba(52, 51, 51, 0.8)",
          },
        },
        axisLabel: {
          show: true,
          margin: 20,
          textStyle: {
            fontFamily: "MicrosoftYaHei",
            fontSize: 12,
            color: "rgba(113, 113, 113, 1)",
          },
        },
        axisTick: {
          show: false,
        },
      },
      series: [
        {
          name: "计划量",
          type: "line",
          showAllSymbol: true,
          symbol: "circle",
          symbolSize: 5,
          lineStyle: {
            color: "rgba(155, 155, 226, 1)",
          },
          label: {
            show: false,
          },
          itemStyle: {
            color: "rgba(155, 155, 226, 0.8)",
            borderColor: "rgba(155, 155, 226, 0.8)",
            borderWidth: 3,
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "rgba(155, 155, 226, 0.8)",
                  },
                  {
                    offset: 1,
                    color: "rgba(155, 155, 226, 0)",
                  },
                ],
                false
              ),
              shadowColor: "rgba(155, 155, 226, 0.8)",
              shadowBlur: 20,
            },
          },
          data: [502.84, 205.97, 332.79, 281.55, 398.35, 214.02],
        },
        {
          name: "完成量",
          type: "line",
          showAllSymbol: true,
          symbol: "circle",
          symbolSize: 5,
          lineStyle: {
            color: "rgba(233, 195, 116, 1)",
          },
          label: {
            show: false,
          },
          itemStyle: {
            color: "rgba(233, 195, 116, 0.8)",
            borderColor: "rgba(233, 195, 116, 0.8)",
            borderWidth: 3,
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "rgba(233, 195, 116, 0.8)",
                  },
                  {
                    offset: 1,
                    color: "rgba(233, 195, 116, 0)",
                  },
                ],
                false
              ),
              shadowColor: "rgba(233, 195, 116, 0.8)",
              shadowBlur: 20,
            },
          },
          data: [281.55, 398.35, 214.02, 179.55, 289.57, 356.14],
        },
      ],
    };
  };
  // 设置3d地图图表配置 不是3d地图了
  const mapOption = ref({});
  const set3dMapOption = () => {
    // 3d地图配置
    console.log("3d");
    let backgroundColor = "rgba(0,0,0,1)";
    let centertext = "2016";
    let chartdata = [
      {
        name: "竞争性谈判",
        value: "20",
      },
      {
        name: "公开招标",
        value: "30",
      },
      {
        name: "询价",
        value: "20",
      },
      {
        name: "单一来源",
        value: "60",
      },
      {
        name: "邀请招标",
        value: "50",
      },
    ];
    let radius = ["26%", "38%"];
    let color = ["#37FFC9", "#FFE777", "#19D6FF", "#32A1FF", "#FFFFFF"];
    let labelshow = true;
    let data1 = [];

    chartdata.forEach((item) => {
      data1.push(item);
    });
    let dataValue = 0;
    data1.map((item) => {
      dataValue += Number(item.value);
    });
    mapOption.value = {
      backgroundColor: backgroundColor,
      grid: {
        top: "10%",
        bottom: 0,
        left: 0,
        right: 0,
        containLabel: true,
      },
      tooltip: {
        formatter: (params) => {
          if (params.name != "") {
            return (
              params.name +
              " : " +
              params.value +
              "\n" +
              "(" +
              params.percent +
              "%)"
            );
          }
        },
      },
      series: [
        {
          type: "pie",
          radius: radius,
          center: ["50%", "50%"],
          color: color,
          hoverAnimation: false,
          startAngle: 70,
          selectedMode: "single",
          itemStyle: {
            normal: {
              // borderWidth: 8,
              // borderColor: "#021a24",
            },
          },
          label: {
            show: labelshow,
            formatter: "{b}" + " " + "{c}",
          },
          data: data1,
          z: 666,
        },
      ],
    };
  };
  onMounted(() => {
    setChartOption();
    set3dMapOption();
  });
  onUnmounted(() => {});
  return {
    chartOption,
    mapOption,
    setChartOption,
    set3dMapOption,
  };
};
